/**
 * In this file, we create a React component
 * which incorporates components provided by Material-UI.
 */
import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import Dialog from 'material-ui/Dialog';
import {deepOrange500} from 'material-ui/styles/colors';
import FlatButton from 'material-ui/FlatButton';
import AppBar from 'material-ui/AppBar';
import Nav from './comps/Nav';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Paper from './comps/Paper';

const styles = {
  container: {}
};

const muiTheme = getMuiTheme({
  palette: {
    accent1Color: deepOrange500
  }
});

class Main extends Component {
  constructor(props, context) {
    super(props, context);

    this.handleRequestClose = this
      .handleRequestClose
      .bind(this);
    this.handleTouchTap = this
      .handleTouchTap
      .bind(this);

    this.state = {
      open: false
    };
  }

  handleRequestClose() {
    this.setState({open: false});
  }

  handleTouchTap() {
    this.setState({open: true});
  }

  render() {
    const standardActions = (<FlatButton label="Ok" primary={true} onTouchTap={this.handleRequestClose}/>);

    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div >
        <div className="app-bar">
          <AppBar title="张龙的作业" iconClassNameRight="muidocs-icon-navigation-expand-more"/>
          </div>
          <Dialog
            open={this.state.open}
            title="Super Secret Password"
            actions={standardActions}
            modal={false}
            autoScrollBodyContent={true}
            onRequestClose={this.handleRequestClose}>
            <img src="img/1460013.jpg"/>
          </Dialog>
          <div className="app-content">
          <div className="pure-g">
            <div className="pure-u-1-1">
              <h2 className="sub-header">2017年1月</h2>
            </div>

            <div className="pure-u-1 pure-u-md-1-3">
              <Paper src="/img/1460022.crop.jpg" title="素描作业"/>
            </div>

            <div className="pure-u-1 pure-u-md-1-3">
              <Paper src="/img/1460013.crop.jpg" title="色彩作业"/>
            </div>

          </div>
          </div>
          <div className="nav-bottom">
            <Nav/>
          </div>
        </div>

      </MuiThemeProvider>
    );
  }
}

export default Main;
